<template>
	<view class="page-container">
		
		<!-- #ifndef MP-TOUTIAO -->
		<!-- 自定义导航 -->
		<st-custom-header title="积分签到" titleAlign="left" :backgroundColor="backgroundColor"></st-custom-header>
		<!-- #endif -->
		
		<!-- 背景块 -->
		<view class="header-bg-block"></view>
		
		<!-- 圆形渐变 -->
		<view class="header-bg-circle"></view>
		
		<view class="page-wrapper">
			
			<!-- 积分明细 -->
			<view class="sign-data-block">
				<view class="info">
					<view class="num">{{creditAmount}}</view>
					<view class="sub">当前积分</view>
				</view>
				<view class="label" @click="toRecord">积分明细</view>
			</view>
		
			<!-- 签到日期 -->
			<view class="sign-prize-block">
				<view class="decorate-left"></view>
				<view class="decorate-right"></view>
				<view class="sign-prize-block__hd">
					<view class="sign-prize-block__hd__title" v-if="signDatas[signNumber - 1]">今日签到<text class="num">+{{signDatas[signNumber - 1].jifen}}</text>积分</view>
				</view>
				<view class="sign-prize-block__bd">
					<view :class="['sign-prize-block__bd__item', signNumber > index ? 'active' : '']" v-for="(item, index) in signDatas" :key="index">
						<view class="day">{{index + 1}}天</view>
						<view class="icon iconfont" v-if="signNumber > index">&#xe623;</view>
						<view class="icon iconfont" v-else>&#xe640;</view>
						<view class="num">+{{item.jifen}}</view>
					</view>
				</view>
				<view class="sign-prize-block__fd">
					您已连续签到<text class="num">{{signNumber}}</text>天
				</view>
			</view>
			
			<!-- 签到规则 -->
			<view class="sign-rule-block">
				<view class="sign-rule-block__title">签到规则<text class="iconfont">&#xe682;</text></view>
				<view class="sign-rule-block__item">1.每天只能签到一次，即可获取积分。</view>
				<view class="sign-rule-block__item">2.连续签到达到指定天数可以获得额外奖励积分。</view>
			</view>
		
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				creditAmount: 0,
				signDatas: [],
				signNumber: '',
				backgroundColor: 'linear-gradient(to bottom, #00D390, #00D390)'
			}
		},
		onLoad() {
			this.requestSign()
			this.getMemberCredit()
		},
		methods: {
			
			// 签到
			async requestSign(){
				let params, signRes;
				params = {
					method: "api/v2/integral_integral/sign_in"
				}
				signRes = await this.$http(params);
				if(signRes.status){
					this.signNumber = signRes.data.current.sign_number
					this.signDatas = signRes.data.list
				}
				uni.showToast({
					title: signRes.msg,
					icon: "none"
				})
			},
			
			// 获取用户积分
			async getMemberCredit(){
				let params, infoRes;
				params = {
					method: "api/v2/integral_integral/get_integral"
				}
				infoRes = await this.$http(params);
				if(infoRes.status){
					this.creditAmount = infoRes.data.jifen
				}else{
					uni.showToast({
						title: infoRes.msg,
						icon: "none"
					})
				}
			},
			
			// 积分明细
			toRecord(){
				uni.navigateTo({
					url:'./credit'
				})
			}
			
		}
	}
</script>

<style lang="scss">
page{
	background: #f6f6f6;
}
	
.header-bg-block{
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 520rpx;
	//margin-bottom: 200rpx;
	background: linear-gradient(to bottom, #00D390, #6EEBB6);
	&::before{
		content: "";
		width: 420rpx;
		height: 280rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		background: #00CB8B;
		opacity: 1;
		filter: blur(70.72000122070312px);
	}
	&::after{
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, transparent, #f6f6f6);
	}
}

.header-bg-circle{
	position: fixed;
	top: -220rpx;
	right: -152rpx;
	z-index: 1000;
	width: 494rpx;
	height: 494rpx;
	border-radius: 50%;
	background: radial-gradient(circle, transparent, rgba(255,255,255,.5) 80%);
}

.page-wrapper{
	padding: 30rpx;
	position: relative;
}

.sign-data-block{
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* #ifdef H5 */
	padding: 80rpx 0 60rpx;
	/* #endif */
	/* #ifndef H5 */
	padding: 0 0 60rpx;
	/* #endif */
	position: relative;
	z-index: 1001;
	.info{
		.num{
			color: #FFFA95;
			font-size: 64rpx;
			font-weight: bold;
			font-family: Arial, Helvetica, sans-serif;
		}
		.sub{
			color: #fff;
			font-size: 32rpx;
		}
	}
	.label{
		color: #41C88F;
		padding: 16rpx 20rpx;
		margin-right: -30rpx;
		font-size: 28rpx;
		border-radius: 200rpx 0 0 200rpx;
		background: rgba(255,255,255,.8);
	}
}

.sign-prize-block{
	position: relative;
	margin-bottom: 40rpx;
	border-radius: 20rpx;
	background-color: $uni-bg-color;
	.decorate-left{
		position: absolute;
		top: 26rpx;
		left: 40rpx;
		&::before{
			content: "";
			display: block;
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background: rgba(0,211,144,0.3);
		}
		&::after{
			content: "";
			display: block;
			width: 16rpx;
			height: 60rpx;
			position: absolute;
			left: 2rpx;
			bottom: 6rpx;
			border-radius: 80rpx;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,61,41,0.2);
			background: #fff;
		}
	}
	.decorate-right{
		position: absolute;
		top: 26rpx;
		right: 40rpx;
		&::before{
			content: "";
			display: block;
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background: rgba(0,211,144,0.3);
		}
		&::after{
			content: "";
			display: block;
			width: 16rpx;
			height: 60rpx;
			position: absolute;
			left: 2rpx;
			bottom: 6rpx;
			border-radius: 80rpx;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,61,41,0.2);
			background: #fff;
		}
	}
	&__hd{
		text-align: center;
		padding: 28rpx 0 0;
		&__title{
			color: #49BA94;
			font-size: 28rpx;
			.num{
				padding: 0 4rpx;
			}
		}
	}
	&__bd{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 38rpx 0 28rpx;
		&__item{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			width: 80rpx;
			height: 128rpx;
			margin: 0 8rpx;
			text-align: center;
			overflow: hidden;
			border-radius: $uni-border-radius-base;
			border-radius: 12rpx;
			font-family: Arial, Helvetica, sans-serif;
			background: linear-gradient(135deg, #37a8ff 0%, #2196F3 100%);
			&.active{
				background: rgba(0,211,144,0.2);
				.day{
					background: rgba(0,211,144,0.2);
				}
				.icon{
					color: rgba(0,211,144,0.2);
					font-size: 30rpx;
					background: none;
				}
				.num{
					color: rgba(0,211,144,0.5);
				}
			}
			.day{
				color: #fff;
				display: block;
				width: 100%;
				height: 32rpx;
				line-height: 34rpx;
				font-size: 20rpx;
				background: #00B266;
			}
			.icon{
				color: #FFD100;
				display: inline-block;
				width: 36rpx;
				height: 36rpx;
				margin-top: 12rpx;
				border-radius: 50%;
				font-size: 36rpx;
				background: #fff;
			}
			.num{
				color: #fff;
				text-align: center;
				padding: 8rpx 0;
				font-size: 24rpx;
			}
		}
	}
	&__fd{
		color: #fff;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		border-radius: 0 0 20rpx 20rpx;
		background: #69D8A8;
		.num{
			padding: 0 6rpx;
			font-size: 48rpx;
		}
	}
}

.sign-rule-block{
	&__title{
		color: #999;
		margin-bottom: 12rpx;
		font-size: $uni-font-size-base;
		.iconfont{
			color: #FFA647;
			vertical-align: middle;
			margin: -8rpx 0 0 6rpx;
		}
	}
	&__item{
		color: #999;
		padding: 4rpx 0;
		font-size: $uni-font-size-sm;
	}
}
	
</style>
